<template>
    <div class="tab flex">
        <span class="tab__item"
        v-for="(item,index) in tabItems"
        :key="item.id"
        :class="{'tab__item--active':index===activeIndex}"
        >
        {{ item.label }}
        </span>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const activeIndex = ref(1);

const tabItems = ref([
    {label:'游戏',id:'tab01'},
    {label:'Vlog',id:'tab02'},
    {label:'游戏',id:'tab03'},
    {label:'游戏',id:'tab04'},
    {label:'游戏',id:'tab05'},
    {label:'游戏',id:'tab06'},
    {label:'游戏',id:'tab07'},
])
</script>

<style lang="scss" scoped>
.tab{
    width: 100%;
    height: pxToRem(50);
    overflow-x: scroll;
    &__item{
        display: inline-block;
        width: pxToRem(100);
        font-size: pxToRem(16);
        flex-shrink: 0;
        color: #eee;
        &--active{
            color: #333;
        }
    }
}
</style>